<template lang="html">
<div class="basicTable">
  <el-button v-on:click="getdata">计算</el-button>
  <el-col :xs="24" :sm="{span:12,offset:0}" :md="{span:14,offset:0} " :lg="{span:16,offset:0}" class="common-nav">
    <el-col :xs="24" :sm="{span:8,offset:1}" :md="{span:4,offset:2}" :lg="{span:4,offset:2}">
      <el-input placeholder="搜索" icon="search" v-model="input2" >
        </el-input>
    </el-col>
    <el-col :xs="24" :sm="{span:13,offset:0}" :md="{span:6,offset:0}" :lg="{span:6,offset:0}">
      <div class="block">
        <el-date-picker  v-model="value7" type="daterange"  align="right" placeholder="选择日期范围" :picker-options="pickerOptions2">
        </el-date-picker>
      </div>
    </el-col>
  </el-col>
  <el-table
      :max-height="700"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="id"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="avatar"
        label="地址">
      </el-table-column>
    </el-table>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"

     layout=" prev, pager, next, jumper"
     :total="totalCount">
   </el-pagination>
   <!-- :page-size="10" sizes, -->
    </div>
</div>




</template>

<script>
export default {


    data() {


        this.$http.get('http://127.0.0.1:3000/people').then((objData) => {

            //计算数组分页数
            const getItmeCon = (getData, cont) => {
                let itmeCon = Math.ceil(getData.length / cont)
                return itmeCon * 10
            }


            //切割数组 方法
            const getDataTable = (getData, cont) => {
                // let getData = [];//原始数据 无分页
                let showDataArr = []; //显示单元格数组
                let itmeCon = 0; ////分页数量
                let oneItem = []; //中间暂存数组
                // let cont = 10 ;//每页单元格个数
                itmeCon = Math.ceil(getData.length / cont); //分页 数量


                for (let j = 0; j < itmeCon; j++) {
                    for (let i = j * cont; i < (j + 1) * cont; i++) {

                        if (getData.length > i) {
                            oneItem.push(getData[i])

                        } else {
                            break;
                        }


                    }
                    showDataArr.push(oneItem)
                    console.log(showDataArr);
                    oneItem = [];
                }
                return showDataArr
            }
            //传递 给全局
            this.allData = getDataTable(objData.data, 10)
            //传递 给显示
            this.tableData = this.allData[0]
            this.totalCount = getItmeCon(objData.data, 10)


        }).catch((err) => {
            console.log(err);
        })




        return {

            input2: '',
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value6: '',
            value7: '',
            allData: '', //初始数据值
            totalCount: 0,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            data: '',
            apiUrl: '127.0.0.1/3000'
        }


    },
    methods: {
        getdata() {

        },
        //获取[{},{}*cont]*分页数的数组

        handleSizeChange(val) {

            console.log(this.getItmeCon(objData.data, 10));
            console.log(`每页 ${val} 条`);

        },
        handleCurrentChange(val) {
            this.currentPage = val;
            console.log(`当前页: ${val}`);
            this.tableData = this.allData[val - 1];

        }


    }





}
</script>

<style lang="css">
</style>
